<template>
    <navBar title="律师认证" :fromShare="fromShare"></navBar>

    <view class="Underreview" v-if="Status == 0">
        <image :src="staticImg('BgSub_passs.png')" mode="widthFix" class="underImg"></image>
        <text class="color-999 size32 m-top50">审核中...</text>
    </view>
    <view class="Underreview" v-else-if="Status == 2">
        <image :src="staticImg('BgSub_pass.png')" mode="widthFix" class="underImg"></image>
        <view class="color_33 size26 padding30" v-if="reason">{{ reason }}</view>
        <text class="color-e81 size32 m-top50">审核未通过...</text>
        <view class="auThen" @click="Status = 3">律师认证</view>
    </view>
    <block v-else-if="Status == 3">
        <block v-for="(item, index) in lawyerInfo" :key="index">
            <view class="Box" v-if="item.type == 'info'">
                <text class="Title">{{ item.Title }}</text>
                <view class="From">
                    <block v-for="(sub, sin) in item.list" :key="sin">
                        <view class="FormList" v-if="sub.type == 'text'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <input
                                type="text"
                                class="inputText"
                                placeholder-class="place"
                                v-model="sub.content"
                                :placeholder="`请输入${sub.title}`" />
                        </view>

                        <view class="FormList" v-if="sub.type == 'tel'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <input
                                type="tel"
                                class="inputText"
                                placeholder-class="place"
                                maxlength="11"
                                v-model="sub.content"
                                :placeholder="`请输入${sub.title}`" />
                        </view>

                        <!-- 多选 职业领域-->
                        <view
                            class="MultipleList"
                            v-if="sub.type == 'Multiple'"
                            @click="Multipleshow = true">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <view class="MultBox" v-if="sub.select.length">
                                <view
                                    class="lis"
                                    v-for="(item, index) in sub.select"
                                    :key="index"
                                    >{{ item.dictLabel }}</view
                                >
                            </view>
                            <text class="flex-1 color-ccc size28" v-else>请选择职业领域</text>
                            <view class="iconfont icon-a-zujian32 color-ccc size22"></view>
                        </view>

                        <view class="FormList" v-if="sub.type == 'date'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <view class="inputBox" :class="isValue(sub)" @click="showDate(sin)">
                                {{ isContent(sub) }}
                            </view>
                            <view class="iconfont icon-a-zujian32 color-ccc size22"></view>
                        </view>

                        <view class="FormList" v-if="sub.type == 'address'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <view class="inputBox" :class="isValue(sub)" @click="visible = true">{{
                                isContent(sub)
                            }}</view>
                            <view class="iconfont icon-a-zujian32 color-ccc size22"></view>
                        </view>

                        <view class="FormList" v-if="sub.type == 'picker'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <view class="inputBox" @click="sub.show = true">
                                <text :class="isValue(sub)" class="flex-1">{{
                                    isContent(sub)
                                }}</text>
                                <view class="iconfont icon-a-zujian32 color-ccc size22"></view>
                                <up-picker
                                    :show="sub.show"
                                    :title="`请选择${sub.title}`"
                                    :keyName="sub.keyname"
                                    :columns="sub.select"
                                    @cancel="sub.show = false"
                                    @confirm="confirmPicker($event, sin)"
                                    class="up-picker"></up-picker>
                            </view>
                        </view>

                        <view class="Formarea" v-if="sub.type == 'textarea'">
                            <text class="Name ellipsis">{{ sub.title }} :</text>
                            <textarea
                                class="textarea"
                                v-model="sub.content"
                                :placeholder="`请输入${sub.title}`"
                                placeholder-class="place"
                                :maxlength="300"></textarea>
                        </view>
                    </block>
                </view>
            </view>

            <view class="Box" v-if="item.type == 'img'">
                <text class="Title">{{ item.Title }}</text>
                <view class="InfoCard">
                    <view
                        class="List"
                        @click="uploadImg(sin)"
                        v-for="(sub, sin) in item.list"
                        :key="sin">
                        <image
                            :src="staticImg(sub.defaultImg)"
                            mode="aspectFill"
                            class="listImg"
                            v-if="!sub.content">
                        </image>
                        <image
                            :src="imgUrls(sub.content)"
                            mode="aspectFill"
                            class="listImg"
                            v-else></image>
                        <text class="List_name">{{ sub.title }}</text>
                    </view>
                </view>
            </view>
        </block>
        <view class="Now">
            <view class="Continue" @click="nextStep">提交</view>
        </view>
    </block>

    <up-datetime-picker
        :show="show"
        v-model="value1"
        :minDate="-1234559422934"
        :maxDate="Date.now()"
        mode="date"
        @cancel="show = false"
        @confirm="confirmDate"></up-datetime-picker>

    <cityPicker
        :column="3"
        :default-value="defaultValue"
        :mask-close-able="true"
        @confirm="confirmCity"
        @cancel="visible = false"
        :visible="visible" />

    <up-popup :show="Multipleshow" @close="Multipleshow = false" :round="10" closeable>
        <view class="MultipleBox">
            <text class="black size36 text-center">职业领域</text>
            <view class="row m-top20">
                <view
                    class="list"
                    :class="{ active: item.status == 1 }"
                    @click="Controlsmul(item, index)"
                    v-for="(item, index) in domainData"
                    :key="index"
                    >{{ item.dictLabel }}</view
                >
            </view>
        </view>
    </up-popup>
</template>

<script setup>
    import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
    import { ref, reactive, computed, watch } from 'vue';
    import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import { lawFirmSelectList, professionField, getLawyerStatus } from '@/utils/api.js';
    import {
        tampToDate,
        staticImg,
        imgUrls,
        Toast,
        chooseImage,
        uploadFile,
        validatePhone,
        toRect,
    } from '@/utils/utils.js';
    import Http from '@/utils/request.js';
    const fromShare = ref(0);
    const lawFirmId = ref();
    const show = ref(false);
    const value1 = ref(Date.now());
    const visible = ref(false);
    const defaultValue = ref('500103');
    const dateIndex = ref(0);
    const Status = ref(3); // 0:待审核 1:审核通过 2:审核未通过 3.未申请
    const reason = ref('');

    const Multipleshow = ref(false);
    const domainData = ref([]);
    const lawyerInfo = ref([
        {
            Title: '基本信息',
            type: 'info',
            list: [
                {
                    name: 'realName',
                    type: 'text',
                    content: '',
                    title: '律师姓名',
                },
                {
                    name: 'credentialNo',
                    type: 'text',
                    content: '',
                    title: '律师职业证号',
                },
                {
                    name: 'phone',
                    type: 'tel',
                    content: '',
                    title: '联系电话',
                },
                {
                    name: 'phoneBack',
                    type: 'tel',
                    content: '',
                    title: '备用电话',
                },
                {
                    name: 'birthday',
                    type: 'date',
                    content: '',
                    title: '出生日期',
                },
                {
                    name: 'year',
                    type: 'text',
                    content: '',
                    title: '职业年限',
                },
                {
                    name: 'lawFirmId',
                    type: 'picker',
                    keyname: 'name',
                    content: '',
                    title: '律所名称',
                    select: [],
                },
                // {
                //     name: 'address',
                //     type: 'address',
                //     content: '',
                //     title: '律所地址',
                //     select: [],
                // },
                {
                    name: 'school',
                    type: 'text',
                    content: '',
                    title: '毕业院校',
                },
                {
                    name: 'degree',
                    type: 'picker',
                    keyname: 'dictLabel',
                    content: '',
                    title: '学历',
                    show: false,
                    select: [],
                },
                {
                    name: 'political',
                    type: 'picker',
                    keyname: 'dictLabel',
                    content: '',
                    title: '政治面貌',
                    show: false,
                    select: [],
                },
                {
                    name: 'profession_field',
                    type: 'Multiple',
                    content: '',
                    title: '职业领域',
                    select: [],
                },
                {
                    name: 'lawyerDesc',
                    type: 'textarea',
                    content: '',
                    title: '个人简介',
                },
            ],
        },
        {
            Title: '身份证信息',
            type: 'img',
            list: [
                {
                    name: 'idFront',
                    type: 'img',
                    defaultImg: 'dfz.png',
                    content: '',
                    title: '身份证正面照',
                },
                {
                    name: 'idBack',
                    type: 'img',
                    defaultImg: 'sfz2.png',
                    content: '',
                    title: '身份证背面照',
                },
                {
                    name: 'qualification',
                    type: 'img',
                    defaultImg: 'dfz.png',
                    content: '',
                    title: '律师资格证',
                },
                {
                    name: 'photos',
                    type: 'img',
                    defaultImg: 'gzz.png',
                    content: '',
                    title: '工作照',
                },
            ],
        },
    ]);

    onLoad(async (opt) => {
        if (opt.fromShare) fromShare.value = opt.fromShare;
        if (opt.lawFirmId) lawFirmId.value = opt.lawFirmId;
        getLawyerOption();
        const lawyerStatus = await getLawyerStatus();
        Status.value = lawyerStatus.status;
        if (lawyerStatus.status == 1) return toRect(`/lawyer/home`);
        if (lawyerStatus.reason) reason.value = lawyerStatus.reason;

        const result = await lawFirmSelectList(lawFirmId.value);
        const ListItem = lawyerInfo.value[0].list.findIndex((n) => n.name == 'lawFirmId');
        lawyerInfo.value[0].list[ListItem].select[0] = result || [];

        const Domain = await professionField();
        domainData.value = Domain;
    });

    const getLawyerOption = () => {
        Http.get({
            url: '/api/getLawyerOption',
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            const degreeIndex = lawyerInfo.value[0].list.findIndex((n) => n.name == 'degree');
            lawyerInfo.value[0].list[degreeIndex].select[0] = res.degree || [];
            const politicalIndex = lawyerInfo.value[0].list.findIndex((n) => n.name == 'political');
            lawyerInfo.value[0].list[politicalIndex].select[0] = res.political || [];
        });
    };

    const nextStep = () => {
        const allArr = [...lawyerInfo.value[0].list, ...lawyerInfo.value[1].list];
        const paramData = {};
        for (let item of allArr) {
            if (!item.content) return Toast(`${item.title}不能为空！`);
            if (item.name == 'lawFirmId') {
                const result = item.select[0].find((n) => n.name == item.content);
                paramData[item.name] = result.id;
            } else if (item.name == 'degree') {
                // 学历
                const findItem = item.select[0].find((n) => n.dictLabel == item.content);
                paramData[item.name] = findItem.dictValue;
            } else if (item.name == 'political') {
                // 政治面貌
                const findItem = item.select[0].find((n) => n.dictLabel == item.content);
                paramData[item.name] = findItem.dictValue;
            } else if (item.name == 'phone' || item.name == 'phoneBack') {
                // 联系电话、备用电话
                const validate = validatePhone(item.content);
                if (!validate) return Toast(`${item.title}输入有误`);
                paramData[item.name] = item.content;
            } else {
                paramData[item.name] = item.content;
            }
        }
        console.log(paramData);
        Http.post({
            url: '/lawyer/apply',
            data: paramData,
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);

            Toast(res.msg, 2);
        });
    };

    const showDate = (Index) => {
        dateIndex.value = Index;
        show.value = true;
    };
    const confirmDate = (event) => {
        lawyerInfo.value[0].list[dateIndex.value].content = tampToDate(event.value);
        show.value = false;
    };
    const confirmPicker = (event, index) => {
        const Item = lawyerInfo.value[0].list[index];
        if (Item.name == 'lawFirmId') {
            Item.content = event.value[0].name;
        } else if (Item.name == 'degree') {
            Item.content = event.value[0].dictLabel;
        } else {
            Item.content = event.value[0].dictValue;
        }
        lawyerInfo.value[0].list[index].show = false;
    };
    const confirmCity = (e) => {
        const Index = lawyerInfo.value[0].list.findIndex((n) => n.type == 'address');
        lawyerInfo.value[0].list[Index].content = e.name;
        visible.value = false;
    };
    const uploadImg = async (index) => {
        const resultImg = await chooseImage();
        const savePath = await uploadFile(resultImg.path);
        lawyerInfo.value[1].list[index].content = savePath;
    };
    const isValue = (Item) => {
        return Item.content ? 'color-222' : 'color-ccc';
    };

    const Controlsmul = (Item, Index) => {
        const result = lawyerInfo.value[0].list;
        const current = result.findIndex((n) => n.type == 'Multiple');
        let index = result[current].select.findIndex((item) => item.dictValue === Item.dictValue);
        if (index != -1) {
            result[current].select.splice(index, 1);
            Item.status = 0;
        } else {
            result[current].select.push(Item);
            Item.status = 1;
        }
        result[current].content = result[current].select.map((item) => item.dictValue).join(',');
    };
    const isContent = (Item) => {
        return Item.content ? Item.content : '请选择' + Item.title;
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .Underreview {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .underImg {
            width: 70%;
            margin-top: 150rpx;
        }
        .auThen {
            width: 260rpx;
            height: 80rpx;
            background-color: $color_008;
            color: #fff;
            font-size: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10rpx;
            margin-top: 100rpx;
        }
    }
    .MultipleBox {
        width: 100%;
        padding: 50rpx;
        display: flex;
        flex-direction: column;

        .list {
            background-color: #f1f1f1;
            padding: 10rpx 20rpx;
            border-radius: 6rpx;
            color: #999;
            font-size: 24rpx;
            margin: 10px 16rpx 4rpx 0;
        }
        .active {
            background-color: $color_008;
            color: #fff;
        }
    }
    @mixin name {
        width: 200rpx;
        height: 100%;
        line-height: 100rpx;
        color: #222;
        font-size: 28rpx;
    }

    .Box {
        width: 710rpx;
        margin: 20rpx auto 0;

        .Title {
            color: #222;
            font-size: 32rpx;
            font-weight: 500;
        }

        .From {
            width: 100%;
            margin-top: 20rpx;
            padding: 0 20rpx;
            background-color: #ffffff;
            border-radius: 10rpx;

            .FormList {
                width: 100%;
                height: 100rpx;
                display: flex;

                align-items: center;
                border-bottom: 1rpx solid #f2f2f2;

                .Name {
                    @include name;
                }

                .inputText {
                    flex: 1;
                    height: 100%;
                    color: #222;
                    font-size: 28rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                }

                .inputBox {
                    flex: 1;
                    height: 100%;
                    color: #222;
                    font-size: 28rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                    justify-content: space-between;

                    .up-picker {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        inset: 0;
                    }
                }
            }
            .MultipleList {
                width: 100%;
                min-height: 100rpx;
                padding: 10rpx 0;
                display: flex;
                align-items: center;
                border-bottom: 1rpx solid #f2f2f2;
                .Name {
                    width: 200rpx;
                    height: 100%;
                    color: #222;
                    font-size: 28rpx;
                }
                .MultBox {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    .lis {
                        padding: 4rpx 12rpx;
                        border-radius: 6rpx;
                        background-color: $color_008;
                        font-size: 24rpx;
                        color: #fff;
                        margin: 5rpx 20rpx 5rpx 0;
                    }
                }
            }

            .Formarea {
                width: 100%;
                background-color: #ffffff;

                .Name {
                    @include name;
                }

                .textarea {
                    width: 100%;
                    height: 300rpx;
                    background-color: #ffffff;
                    font-size: 28rpx;
                }
            }
        }

        .InfoCard {
            width: 100%;
            padding: 24rpx;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 20rpx;
            background-color: #ffffff;
            border-radius: 10rpx;

            .List {
                width: 306rpx;
                height: 264rpx;
                background-color: #e5f2ff;
                border-radius: 8rpx;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                margin-bottom: 30rpx;
                margin-top: 10rpx;

                .listImg {
                    width: 100%;
                    height: 206rpx;
                }

                .List_name {
                    text-align: center;
                    font-size: 28rpx;
                    color: #0083ff;
                    line-height: 54rpx;
                }
            }
        }
    }

    .Now {
        width: 100%;
        padding: 20rpx 0 40rpx 0;
        background-color: #fff;
        margin-top: 20rpx;
    }

    .Continue {
        width: 710rpx;
        height: 82rpx;
        margin: 0 auto;
        background-color: $color_008;
        color: #fff;
        font-size: 28rpx;
        border-radius: 14rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .place {
        color: #ccc;
        font-size: 28rpx;
    }
</style>
